<template>
  <div>
    <el-dialog v-el-drag-dialog title="选择下一步处理人" :close-on-click-modal="false" v-model="isShow" width="85%" append-to-body v-loading="loading" @close="closeHandler">
      <div class="mb20"
      >主题：<span class="text-success">{{ selectUserParam.businessSubject || (selectUserParam.params && selectUserParam.params.businessSubject) }}</span></div
      >
      <el-table :data="data" :highlight-current-row="false">
        <el-table-column label="审批节点" prop="taskName" align="center" width="200px" />
        <el-table-column label="指定审批人" align="center">
          <template #default="scope">
            <el-table :data="scope.row.approvers" max-height="250" @selection-change="dataChange($event, scope.row.taskId)" size="mini" style="width: 100%" border>
              <el-table-column type="selection" width="40px"></el-table-column>
              <el-table-column label="登录名" prop="loginName" align="center" width="200px" />
              <el-table-column label="用户名" prop="userName" align="center" width="200px" />
              <el-table-column label="公司名称" prop="companyName" align="center" :show-overflow-tooltip="true" />
              <el-table-column label="部门名称" prop="deptName" align="center" :show-overflow-tooltip="true" />
            </el-table>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div v-for="(item,index) in data" :key="index">
        <el-row>
          <el-col :span="4">
            <div>{{item.taskName}}</div>
          </el-col>
          <el-col :span="20">
            <el-table :data="item.approvers" max-height="250" @selection-change="dataChange($event, item.taskId)">
              <el-table-column type="selection" width="100px"></el-table-column>
              <el-table-column label="登录名" prop="loginName" align="center" width="200px" />
              <el-table-column label="用户名" prop="userName" align="center" width="200px" />
              <el-table-column label="公司名称" prop="companyName" align="center" />
              <el-table-column label="部门名称" prop="deptName" align="center" />
            </el-table>
          </el-col>
        </el-row>
      </div> -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isShow = false">关 闭</el-button>
          <el-button @click="selectedConfirm" type="primary">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { cloneDeep, isEmpty } from 'lodash-es';
import { selectWfNextUser } from './api';
export default {
  name: 'SelectNextUser',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    selectUserParam: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 加载中
      loading: false,
      // 是否显示窗体
      isShow: this.visible,
      // 下一步处理人列表
      data: [],
      // 选中的用户列表
      selUserList: {}
    };
  },
  //   created() {
  //     //初始化查询
  //     this.getUserList();
  //   },
  watch: {
    // 同步输入的属性
    visible: {
      handler(newVal, oldVal) {
        this.isShow = newVal;
        if (newVal === true) {
          this.getUserList();
        }
      },
      immediate: true
    }
  },
  methods: {
    // 获取用户列表
    getUserList() {
      this.loading = true;
      const params = cloneDeep(this.selectUserParam)
      delete params.formData
      selectWfNextUser(params)
        .then((response) => {
          this.loading = false;
          this.data = response.data;
        })
        .catch((e) => {
          console.error(e);
          this.loading = false;
        });
    },
    // 选中用户
    dataChange(val, taskId) {
      if (val.length == 0) {
        delete this.selUserList[taskId];
      } else {
        this.selUserList[taskId] = val;
      }
    },
    // 确认选择
    selectedConfirm() {
      if (isEmpty(this.selUserList)) {
        this.$message({ showClose: true, message: '审批人不可以为空', type: 'error' });
        return;
      }
      var selUser = [];
      for (var item in this.selUserList) {
        for (var i in this.selUserList[item]) {
          selUser.push(item + ':' + this.selUserList[item][i].userId);
        }
      }
      // 触发选中事件
      this.$emit('selected', selUser);
      this.closeHandler();
    },
    // 关闭窗口
    closeHandler() {
      // 加载中
      this.loading = false;
      // 是否显示窗体
      this.isShow = false;
      // 下一步处理人列表
      this.data = [];
      // 选中的用户列表
      this.selUserList = {};
      // 触发关闭事件
      this.$emit('close');
    }
  }
};
</script>
<style scoped></style>
